<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/editormd/css/editormd.css"/>
    <link rel="stylesheet" type="text/css" href="/js/webuploader/webuploader.css">
</head>
<body>
<div id="app">
    <input type="hidden" ref="blogId" value="${(blogId)!}">
<!--    <input type="hidden" id="blogId" value="${blogId}">-->
    <div>
        <a href="/" style="padding:0 20px;"> < 返回</a>
        <select v-model="blog.categoryId" @change="changeCategory($event)" class="article-title" id="category"
                style="width: 180px;">
            <option v-for="(category,index) in categoryList" v-bind:value="category.id">{{category.name}}</option>
        </select>
        <input type="text" id="article_title" onkeydown="cacheBlog()" v-model="blog.title" class="article-title"
               placeholder="请在此输入标题"
               style="width: 20%; ">
        <input type="text" id="article-desc" onkeydown="cacheBlog()" v-model="blog.description" class="article-title"
               placeholder="用一句话描述此文章"
               style="width: 20%; font-weight:400;font-size: 12px;position: relative;top:0px;">

        <span style="position: relative">
            <input type="text" id="article-img" v-model="blog.img" ref="blogimg" class="article-title"
                   placeholder="上传封面图片地址"
                   style="width: 30%; font-weight:400;font-size: 12px;position: relative;top:0px;">
            <div id="filePicker" style="position: absolute;top: -10px;right: 20px;width: 30%;">选择图片</div>
            <img style="position: absolute;top: -10px;right: -115px" width="30" height="30" id="imgshow" alt=""
                 :src="blog.img">
        </span>

        <span @click="saveBlog">发表</span>
        <a v-if="blog.id" :href="'/detail/'+blog.id" @click="removeLocal"> - 预览</a>

    </div>

    <div id="test-editor">
        <textarea style="display:none;">### 关于 Editor.md

          **Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
        </textarea>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/vue.global.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/editormd/editormd.js"></script>
<script src="/js/blog/addAndUpdata.js"></script>
<script src="/js/webuploader/webuploader.js"></script>
<!--<script src="/webuploader/webuploader.js"></script>-->
<script>
    //1、初始化Web Uploader
    var uploader = WebUploader.create({
        //2、选择好图片文件后，是否自动上传。
        auto: true,

        //3、swf文件路径
        swf: 'webuploader/Uploader.swf',

        //4、文件接收服务端。
        server: '/api/local/uploadjson?dir=blogs',
        // server: '/api/oss/uploadfile?dir=blogs',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    uploader.on('uploadSuccess', function (file, response) {
        // 把上传的图片放入到input框中
        document.getElementById("article-img").value = response.url;
        // 把图片放入到img标签进行展示
        document.getElementById("imgshow").src = response.url;
        cacheBlog();
        vm.blog.img = response.url;
    });
</script>
</body>
</html>